<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets">
  <ui:composition template="/resources/template/master.xhtml">
    <ui:define name="title">White Board</ui:define>
    <ui:define name="headerContent">
      <li class="pure-menu-selected"><a href="white.jsf">White Board</a></li>
      <li ><a href="json.jsf">JSON</a></li>
    </ui:define>
    <ui:define name="content" id="content">
      <div class="pure-u-1 l-centered">
        <h1 class="pure-u-1">Whiteboard</h1>
        <h2 class="pure-u">Whiteboard Example</h2>
      </div>
      <div class="pure-g-r">
        <div class="pure-u-1 l-centered">
          <canvas id="myCanvas" width="300" height="300" style="border:1px solid #000000;"></canvas>
        </div>
      </div>
      <form class="pure-form pure-form-stacked l-centered" name="inputForm">
        <h3>Color</h3>
        <div class="pure-g-r pure-u-1-3">
          <div class="pure-u-1-4">
            <label for="colorRed" class="pure-radio">Red</label>
          </div>
          <div class="pure-u-1-4">
            <label for="colorBlue" class="pure-radio">Blue</label>
          </div>
          <div class="pure-u-1-4">
            <label for="colorOrange" class="pure-radio">Orange</label>
          </div>
          <div class="pure-u-1-4">
            <label for="colorGreen" class="pure-radio">Green</label>
          </div>
          <div class="pure-u-1-4">
            <input id="colorRed" type="radio" name="color" value="#FF0000" checked="true"/>
          </div>
          <div class="pure-u-1-4">
            <input id="colorBlue" type="radio" name="color" value="#0000FF"/>
          </div>
          <div class="pure-u-1-4">
            <input id="colorOrange" type="radio" name="color" value="#FF9900"/>
          </div>
          <div class="pure-u-1-4">
            <input id="colorGreen" type="radio" name="color" value="#33CC33"/>
          </div>
        </div>

        <h3>Shape</h3>
        <div class="pure-g-r pure-u-1-4">
          <div class="pure-u-1-2">
            <label for="shapeSquare" class="pure-radio">Square</label>
          </div>
          <div class="pure-u-1-2">
            <label for="shapeCircle" class="pure-radio">Circle</label>
          </div>
          <div class="pure-u-1-2">
            <input id="shapeSquare" type="radio" name="shape" value="square" checked="true"/>
          </div>
          <div class="pure-u-1-2">
            <input id="shapeCircle" type="radio" name="shape" value="circle"/>
          </div>
        </div>

        <label for="instant" class="pure-checkbox">
          <input id="instant" type="checkbox" value="Online" checked="true"/>Online
        </label>

        <button class="pure-button notice" type="submit" onclick="defineImageBinary();
            return false;">Send Snapshot</button>
      </form>
      <script type="text/javascript" src="resources/js/white/websocket.js"></script>
      <script type="text/javascript" src="resources/js/white/whiteboard.js"></script>
    </ui:define>

  </ui:composition>
</html>